<template>
	<form @submit="submit">
		<view class="cell">
			<view class="cell-title">房号</view>
			<hg-select :clearable="false" :searchable="false" :items="bindeds" v-model="room" class="cell-content"></hg-select>
		</view>
		
		<view class="cell required">
			<view class="cell-title">联系人</view>
			<input class="cell-content" v-model="post.userName" placeholder="请输入联系人姓名"/>
		</view>
		
		<view class="cell required">
			<view class="cell-title">联系电话</view>
			<input class="cell-content" type="number" maxlength="11" v-model="post.phone" placeholder="请输入联系电话"/>
		</view>
		
		<view class="cell required">
			<view class="cell-title">报停原因:</view>
			<textarea maxlength="256" focus auto-height auto-focus adjust-position 
			class="cell-content" v-model="post.remark" placeholder="情填写报停原因,5个字以上" />
		</view>
		
		<view class="bottom horizontal">
			<button v-if="post.remark.length<=5" style="background-color: gray;" class="capsule scale" @tap="hint">提交</button>
			<button v-else style="color: white;background-color: var(--color-ok);" class="capsule scale" form-type="submit">提交</button>
		</view>
	</form>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import juFieldGroup from '@/components/ju-field/ju-field-group.vue';
	import juField from '@/components/ju-field/ju-field.vue';
	import mkUpload from '@/components/mk-upload/mk-upload.vue'
	
	import card from '@/mixins/card.js'
	
	const app = getApp()
	
	export default {
		components:{
			hgCell, xflSelect, juFieldGroup, juField, mkUpload, 
		},
		mixins:[card,],
		data() {
			return {
				post:{
					// 房号
					roomId: '',
					// 故障详细描述
					remark:'',
					userName:"",
					phone:'',
					code:'',
				},
			}
		},
		onLoad(opts) {
			// 默认房号信息回显
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token, 
				},
				url: app.globalData.url + 'defaultWaterCard',
				method: 'GET',
				success: res => {
					const {data} = res
					if(data.code==200){
						this.cardInfo=data.data
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: data.message,
						});
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {}
			});
		},
		methods: {
			selTime(e){
				const [start, end] = e.newVal.split('-')
				this.post.visitStartTime = start
				this.post.visitEndTime = end
			},
			hint(){
				uni.showToast({
					title:'报停原因未填写至5个字以上！',
					icon:'none'
				})
			},
			selType(evt){
				const {index} = evt
				this.post.type = index + 1
			},
			submit(){
				if(!this.post.userName || !this.post.phone){
					uni.showToast({
						icon:'none',
						title:'联系人和联系方式必填！',
						duration:5000,
					})
					return 
				}
				if(this.post.remark==''){
					uni.showToast({
						title:'请填写报停原因再提交！',
						icon:'none'
					})
					return
				}
				uni.showModal({
					showCancel:true,
					title:'报停',
					content:`确定要报停${this.bindeds[this.room].label}吗?`,
					success: (res) => {
						if(res.confirm){
							uni.request({
								header:{
									Authorization: 'Bearer ' + app.globalData.token,
								},
								url: app.globalData.curl + 'workOrder/reportStop',
								method: 'POST',
								data: {
									roomId: this.get.rooms[this.room].id,
									remark: this.post.remark,
									userName: this.post.userName,
									phone: this.post.phone,
								},
								success: res => {
									const {data} = res
									console.log(data)
									if(data.code==200){
										uni.showModal({
											title: '报停',
											content: '提交成功，我们工作人员会尽快与您联系！',
											showCancel: false,
											success: res => {
												if(res.confirm){
													uni.redirectTo({
														url: '../progress/progress',
													});
												}
											},
										});
									}else if(data.code==500){
										uni.showToast({
											icon:'none',
											title: data.message,
										});
									}
								},
								fail: (err) => {console.error(err)},
								complete: () => {}
							});
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	textarea{
		background-color: white;
		border-radius: 10rpx;
	}
	
	[required]{
		content: '*';
	}
</style>
